import React,{ useState } from 'react';

import {  DatePicker, Space, message } from 'antd';
// import zhCN from 'antd/lib/locale/zh_CN';

function onChange(date, dateString) {
  console.log(date, dateString);
}

const DatePickerComponent = () => {
  const [date, setDate] = useState(null);
  const handleChange = value => {
    message.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`);
    setDate(value);
  };

  return (<>
    {/* <ConfigProvider locale={zhCN}> */}
      <div>
        <DatePicker onChange={handleChange} />
        <div style={{ marginTop: 16 }}>
          当前日期：{date ? date.format('YYYY年MM月DD日') : '未选择'}
        </div>
      </div>

      <Space direction="vertical">
        <DatePicker onChange={onChange} />
        <DatePicker onChange={onChange} picker="week" />
        <DatePicker onChange={onChange} picker="month" />
        <DatePicker onChange={onChange} picker="quarter" />
        <DatePicker onChange={onChange} picker="year" />
      </Space>
    {/* </ConfigProvider> */}
  </>)
}


export default DatePickerComponent;